<template>
	<view class="law-page">
		<u-navbar :isBack="true" title="法律咨询" title-color="#111111" back-icon-color="#111111"
			:background="{background: 'white'}" :borderBottom="false"></u-navbar>
		<view style="font-size: 0rpx; position: relative; background: rgba(245, 248, 255, 1);">
			<image :src="bg1" style="width: 750rpx; height: 706rpx;"></image>
			<view class="flex-col-start"
				style="padding-top: 44rpx; position: absolute; left: 0; top: 0; width: 750rpx;">
				<view style="font-size: 72rpx; font-weight: 500;" class="color-text1">专业律师在线</view>
				<view class="flex-row-center" style="margin-top: 12rpx;">
					<image style="width: 24rpx; height: 24rpx;" :src="starImg"></image>
					<view class="color-text1" style="margin:0 14rpx; font-size: 48rpx; font-weight: 500;">帮您解决法律问题
					</view>
					<image style="width: 24rpx; height: 24rpx;" :src="starImg"></image>
				</view>
				<view class="flex-row-center" style="margin-top: 32rpx;">
					<view class="flex-row-start item-tip1">
						<image src="/static/icon/law-sel.png"></image>
						<view>积极响应</view>
					</view>
					<view class="flex-row-start item-tip1" style="margin-left: 32rpx; margin-right: 32rpx;">
						<image src="/static/icon/law-sel.png"></image>
						<view>已服务10万+用户</view>
					</view>
					<view class="flex-row-start item-tip1">
						<image src="/static/icon/law-sel.png"></image>
						<view>服务好评率98%以上</view>
					</view>
				</view>
				<view class="flex-row-start"
					style="margin-top: 54rpx; width: 100%; padding-left: 32rpx; overflow-x: scroll;">
					<view class="flex-col-start item-tip2">
						<view class="u-line-2" style="font-size: 24rpx; line-height: 28rpx;">
							“第1次在网上咨询法律问题，袁律师回答很耐心，没有耐心咋办啊”</view>
						<view class="flex-row-start info1">
							<image
								style="margin-right: 8rpx; width: 44rpx; height: 44rpx;border-radius: 22rpx;background: red;">
							</image>
							<view style="color: #666666; font-size: 28rpx;">袁律师</view>
							<view style="flex: 1; text-align: right; color: #5DA0FF; font-size: 24rpx;">#婚姻家庭</view>
						</view>
					</view>
					<view class="flex-col-start item-tip2">
						<view class="u-line-2" style="font-size: 24rpx; line-height: 28rpx;">
							“第1次在网上咨询法律问题，袁律师回答很耐心，没有耐心咋办啊”</view>
						<view class="flex-row-start info1">
							<image
								style="margin-right: 8rpx; width: 44rpx; height: 44rpx;border-radius: 22rpx;background: red;">
							</image>
							<view style="color: #666666; font-size: 28rpx;">袁律师</view>
							<view style="flex: 1; text-align: right; color: #5DA0FF; font-size: 24rpx;">#婚姻家庭</view>
						</view>
					</view>
					<view class="flex-col-start item-tip2">
						<view class="u-line-2" style="font-size: 24rpx; line-height: 28rpx;">
							“第1次在网上咨询法律问题，袁律师回答很耐心，没有耐心咋办啊”</view>
						<view class="flex-row-start info1">
							<image
								style="margin-right: 8rpx; width: 44rpx; height: 44rpx;border-radius: 22rpx;background: red;">
							</image>
							<view style="color: #666666; font-size: 28rpx;">袁律师</view>
							<view style="flex: 1; text-align: right; color: #5DA0FF; font-size: 24rpx;">#婚姻家庭</view>
						</view>
					</view>
				</view>

			</view>

			<view class="flex-col-start" style="margin-top: -120rpx; background: rgba(245, 248, 255, 1);">
				<view class="yellow-box1"
					style="background: linear-gradient( 180deg, #FFF8F0 0%, #FFFFFF 50%, #FFF8F0 100%);">
					<view class="yellow-box1-bg" :style="{backgroundImage: 'url(' + bg2 + ')'}">
					</view>
					<view class="yellow-box2 flex-col-start" style="align-items: flex-start;">
						<view style="color: #333333; font-size: 40rpx; margin-top: 48rpx; line-height: 44rpx;">律师在手，案情不愁
						</view>
						<view style="position: relative; width: 136rpx; height: 44rpx; margin-top: 20rpx;">
							<image :src="getImgSrc('/myBanner/law-red.png')" style="width: 136rpx; height: 44rpx;">
							</image>
							<view class="flex-row-center"
								style="position: absolute; left: 0; right: 0; bottom: 0; top: 0; color: white; font-size: 26rpx;">
								推荐服务
							</view>
						</view>
						<view class="flex-row-start item-tip3" style="margin-top: 22rpx;">
							<image :src="getImgSrc('/myBanner/law-icon1.png')"></image>
							<view>就近匹配在线律师</view>
						</view>
						<view class="flex-row-start item-tip3">
							<image :src="getImgSrc('/myBanner/law-icon2.png')"></image>
							<view>最快10秒回复咨询</view>
						</view>
						<view class="flex-row-start item-tip3">
							<image :src="getImgSrc('/myBanner/law-icon3.png')"></image>
							<view>1对1私密沟通</view>
						</view>

						<view class="flex-row-center"
							style="position: relative; padding-bottom: 20rpx; font-size: 36rpx; font-weight: 500; color: white; margin-top: 30rpx; width: 626rpx; height: 107rpx; background-size: 100% 100%;"
							:style="{backgroundImage: 'url(' + bg3 + ')'}">
							立即咨询
							<image style="width: 110rpx; height: 110rpx; position: absolute; right: 100rpx; top: 30rpx;"
								:src="getImgSrc('/myBanner/law-figer.png')"></image>
						</view>

					</view>
				</view>
				<image style="width: 748rpx; height: 181rpx; display: block; margin-top: 40rpx;"
					:src="getImgSrc('/myBanner/law-bg7.png')"></image>

				<view class="flex-row-start" style="margin-top: 50rpx; padding-left: 32rpx; width: 100%;">
					<view class="qustion-item1" v-for="(item,index) in questionArr1" :key="index">
						<image class="bigImg1" :src="getImgSrc('/myBanner/law-item-bg1.png')"></image>
						<view class="flex-col-start qustion-item1-content">
							<image class="smallImg1" :src="getImgSrc(item.pic)"></image>
							<view class="title1">{{item.title}}</view>
						</view>
					</view>
				</view>
				<view class="flex-row-start" style="margin-top: -40rpx; padding-left: 114rpx; width: 100%;">
					<view class="qustion-item1" v-for="(item,index) in questionArr2" :key="index">
						<image class="bigImg1" :src="getImgSrc('/myBanner/law-item-bg2.png')"></image>
						<view class="flex-col-start qustion-item1-content">
							<image class="smallImg1" :src="getImgSrc(item.pic)"></image>
							<view class="title1" style="color: rgba(63, 137, 239, 1);">{{item.title}}</view>
						</view>
					</view>
				</view>
				<view class="flex-row-start" style="margin-top: -40rpx; padding-left: 32rpx; width: 100%;">
					<view class="qustion-item1" v-for="(item,index) in questionArr3" :key="index">
						<image class="bigImg1" :src="getImgSrc('/myBanner/law-item-bg1.png')"></image>
						<view class="flex-col-start qustion-item1-content">
							<image class="smallImg1" :src="getImgSrc(item.pic)"></image>
							<view class="title1">{{item.title}}</view>
						</view>
					</view>
				</view>
				<image style="width: 748rpx; height: 191rpx; display: block; margin-top: 40rpx; margin-bottom: 40rpx;"
					:src="getImgSrc('/myBanner/law-bg6.png')"></image>

				<view class="flex-row-start qustion-item2" v-for="(item,index) in questionArr4" :key="index">
					<image class="bigImg1" :src="getImgSrc(item.pic)"></image>
					<view class="flex-col-start"
						style="height: 170rpx; align-items: flex-start; justify-content: space-between;">
						<view class="title1">{{item.title}}</view>
						<view class="desc1">{{item.desc}}</view>
					</view>
				</view>
				<view class="distanceH-120" style="margin-top: 40rpx;"></view>
			</view>
		</view>
		<view class="distanceH-120 flex-col-start" style="z-index: 1; box-shadow: 0px 0 8rpx 0px rgba(37,124,246,0.05); background: white; position: fixed; bottom: 0; left: 0; right: 0;">
			<view class="flex-row-start" style="height: 120rpx;">
				<view class="btn1 flex-row-center" @click="btnClick(1)">咨询记录</view>
				<view class="btn2 flex-row-center" @click="btnClick(2)">立即咨询</view>
			</view>
		</view>
	</view>
</template>

<script>
	import configUrl from '@/utils/config.js';
	import {
		questionArr1,
		questionArr2,
		questionArr3,
		questionArr4
	} from '@/utils/data';
	export default {
		data() {
			return {
				questionArr1: questionArr1,
				questionArr2: questionArr2,
				questionArr3: questionArr3,
				questionArr4: questionArr4,

				bg1: configUrl.appurlNewImg + '/myBanner/law-bg.png',
				bg2: configUrl.appurlNewImg + '/myBanner/law-person.png',
				bg3: configUrl.appurlNewImg + '/myBanner/law-sure.png',
				starImg: configUrl.appurlNewImg + '/myBanner/law-star.png',
				infoArr1: [1, 2],

			}
		},
		methods: {
			getImgSrc(url) {
				return configUrl.appurlNewImg + url
			},
			btnClick(index){
				if (index == 1){
					uni.navigateTo({
						url:'/pages/user/lawRecord'
					})
				}
			}

		}
	}
</script>

<style lang="scss">
	.law-page {
		.color-text1 {
			background: -webkit-linear-gradient(90deg, #FDDB9D 0%, #FFFDF7 100%);
			-webkit-background-clip: text;
			-webkit-text-fill-color: transparent;
			background-clip: text;
			text-fill-color: transparent;
		}

		.item-tip1 {
			image {
				width: 28rpx;
				height: 28rpx;
				margin-right: 4rpx;

			}

			view {
				font-size: 24rpx;
				color: #DDD4CF;
			}
		}

		.item-tip2 {
			position: relative;
			background: #EBE9EA;
			flex-shrink: 0;
			width: 300rpx;
			height: 176rpx;
			border-radius: 16rpx;
			padding: 20rpx;
			box-sizing: border-box;
			margin-right: 24rpx;

			.info1 {
				left: 20rpx;
				right: 20rpx;
				bottom: 20rpx;
				position: absolute;

			}

		}

		.yellow-box1 {
			position: relative;
			width: 686rpx;
			height: 566rpx;
			background: white;
			box-shadow: 0px 4rpx 16rpx 0px rgba(37, 124, 246, 0.05);
			border-radius: 24rpx;

		}

		.yellow-box1-bg {
			width: 686rpx;
			height: 566rpx;
			background-size: 100% 100%;
		}

		.yellow-box2 {
			position: absolute;
			left: 0;
			top: 0;
			padding: 0rpx 24rpx;
			width: 686rpx;
			height: 566rpx;
			background-size: 100% 100%;
		}

		.item-tip3 {
			margin-bottom: 24rpx;

			image {
				width: 36rpx;
				height: 36rpx;
				margin-right: 6rpx;

			}

			view {
				font-size: 28rpx;
				color: #757575;
				line-height: 44rpx;
			}
		}

		.qustion-item1 {
			width: 180rpx;
			height: 180rpx;
			position: relative;
			margin-right: -12rpx;

			.bigImg1 {
				width: 180rpx;
				height: 180rpx;
			}

			.qustion-item1-content {
				position: absolute;
				left: 0;
				top: 0;
				width: 180rpx;
				height: 180rpx;
				align-items: center;
				justify-content: center;
			}

			.smallImg1 {
				margin-top: -5rpx;
				width: 52rpx;
				height: 52rpx;
			}

			.title1 {
				font-size: 24rpx;
				color: rgba(255, 166, 68, 1);
				font-weight: 500;
				margin-top: 10rpx;
			}
		}

		.qustion-item2 {
			width: 686rpx;
			background: white;
			border-radius: 24rpx;
			height: 192rpx;
			margin-bottom: 24rpx;
			overflow: hidden;
			padding-right: 20rpx;

			.bigImg1 {
				width: 216rpx;
				height: 192rpx;
				margin-right: 12rpx;
				flex-shrink: 0;
			}

			.title1 {
				font-size: 36rpx;
				color: rgba(255, 166, 69, 1);
				font-weight: 500;
			}

			.desc1 {
				font-size: 28rpx;
				line-height: 32rpx;
				color: #666666;

			}

		}
		.btn1{
			border: 1px solid rgba(204, 204, 204, 1);
			width: 232rpx;
			height: 92rpx;
			color: rgba(102, 102, 102, 1);
			font-size: 32rpx;
			font-weight: 500;
			margin-right: 24rpx;
			border-radius: 16rpx;
		}
		.btn2{
			border: 1px solid rgba(11, 177, 239, 1);
			background: rgba(11, 177, 239, 1);
			width: 430rpx;
			height: 92rpx;
			color: white;
			font-size: 32rpx;
			font-weight: 500;
			border-radius: 16rpx;
		}
	}
</style>